<template>
    <div class="independence-form">
        <el-page-header @back="goBack" :content="title" class="independence-form-page-header"></el-page-header>
        <div class="independence-form-pannel">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('menus')
export default {
    props: {
        title: String
    },
    methods: {
        goBack() {
            let path = this.$router.currentRoute.path
            let menuPath = path.substring(0, path.lastIndexOf('/'))
            let opendMenu = this.opendMenus.find((v) => v.name == menuPath)
            if (opendMenu) {
                delete opendMenu.nest
            }
            this.$router.push(menuPath)
        }
    },
    computed: {
        ...mapState(['opendMenus'])
    }
}
</script>
<style lang="scss" scoped>
.independence-form-pannel {
    height: calc(100vh - 178px);
    overflow: auto;
    padding-top: 22px;
}
.independence-form {
    padding-top: 10px;
    height: 100%;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.independence-form-page-header::v-deep {
    .el-page-header__content {
        font-size: 16px;
    }
}
.el-page-header {
    border-bottom: 1px solid #ebeef5;
    padding: 10px;
}
</style>
